<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>

<form>
    <table align="center" width="30%" border="1">
        <tr>
            <td align="center"><h1>用户注册</h1></td>
        </tr>

        <tr>
            <td align="left">
                手机号:<input type="text" name="phone_num" id="phone_num" > <span id="phone_msg" style="color: crimson;"></span> <br>
                密码: <input type="password" name="password" id="password"> <span id="pwd_msg" style="color: crimson;"></span> <br>
                确认密码:<input type="password" name="repassword" id="repassword"> <span id="repwd_msg" style="color: crimson"></span><br>
        </tr>

        <tr>
            </td>
            <td align="center">
                <input type="button" value="注册" id="registered">
            </td>
        </tr>



    </table>
</form>

</body>

<script>

    $("#registered").click(function () {
        let phoneNum = $("#phone_num").val();
        let password = $("#password").val();

        //两次密码一致,发送异步请求,实现注册用户逻辑
        $.post("registered",{"phoneNum":phoneNum,"password":password},function (data){
            let f = confirm("注册成功,是否跳转到登录界面")
            if (f){
                //跳转到完善个人信息页面，同时将电话号码带到个人信息页面
                location.href = "login.html";
            }else {
                location.href = "registered.html";
            }
        },"text");

    });


    $("#repassword").blur(function () {
        let repwd = this.value;
        //比较两次密码是否一致
        let password = $("#password").val();
        if (repwd != password){
            $("#repwd_msg").html("两次密码不一致");
            return;
        }
        $("#repwd_msg").html("");



    });


    $("#password").blur(function () {
        let pwd = this.value;
        if (pwd.length < 6 || pwd.length > 18){
            //密码长度不合法
            $("#pwd_msg").html("密码长度应为6-18位");
            return;
        }
            $("#pwd_msg").html("");

        //密码长度合法
        let reg1 = /\d+/;     //最少有一位数字
        let reg2 = /[a-zA-Z]+/;       //最少有一个字母

        let flag = 0;
        if (reg1.test(pwd)){
            flag++;
        }
        if (reg2.test(pwd)){
            flag++;
        }

        if (flag < 2){
            $("#pwd_msg").html("密码必须由字母和数字组成");
            return;
        }

        //密码合法
        $("#pwd_msg").html("");

    });




    $("#phone_num").blur(function () {
        //验证电话号码是否合规
        let phoneNum = this.value;
        let reg = /^1[356789]\d{9}$/;
        if (!reg.test(phoneNum)){
            //电话不合法
            $("#phone_msg").html("请输入正确的电话号码");
            return;
        }
        $("#phone_msg").html("");
        //电话号码正确,判断是否注册过,发送异步请求
        //参数1:请求的url路径
        //参数2:发送请求时向后台提交的数据
        //参数3:后台响应数据后的回调函数
        //参数4:后台返回的数据格式
        $.get("check",{"phoneNum":phoneNum},function(data){
           if(data == "true"){
               //被注册了,跳转到登录页面
               let f = confirm("该手机号已被注册,是否去登录");
               if (f){
                   location.href = "login.html";
               }
           }else {
               //没有被注册,可以继续注册
               $("#phone_msg").html("");
           }
        },"text");

    })
</script>
</html>